<template>
  <div class="container">
    <div class="card_wrap">
      <el-card class="card">
        <div class="label">今日扫码（码/人次/次数）</div>
        <div class="num c-blue">145646
          <span style="margin: 0 1px">/</span>
          145646
          <span style="margin: 0 1px">/</span>
          123134
        </div>
      </el-card>
      <el-card class="card">
        <div class="label">本月扫码（码/人次/次数）</div>
        <div class="num c-blue">145646
          <span style="margin: 0 1px">/</span>
          145646
          <span style="margin: 0 1px">/</span>
          123134
        </div>
      </el-card>
      <el-card class="card">
        <div class="label">今日红包（个/金额）</div>
        <div class="num o-orange">145646
          <span style="margin: 0 1px">/</span>
          145646
        </div>
      </el-card>
      <el-card class="card">
        <div class="label">本月红包（个/金额）</div>
        <div class="num o-orange">145646
          <span style="margin: 0 1px">/</span>
          145646
        </div>
      </el-card>
    </div>
    <el-card class="main_wrap">
      <div class="main">
        <div ref="map_chart" class="map_chart"></div>
        <div class="top10">
          <div class="search m-b-10">
            <el-radio-group v-model="radio" class="flex-start" size="small">
              <el-radio-button label="昨日"></el-radio-button>
              <el-radio-button label="今日"></el-radio-button>
              <el-radio-button label="最近七日"></el-radio-button>
            </el-radio-group>
            <el-date-picker
              v-model="date"
              class="m-l-10"
              clearable
              placeholder="选择日期"
              size="small"
              type="date">
            </el-date-picker>
          </div>
          <el-table
            :data="tableData"
            size="small"
            stripe
            style="width: 100%"
          >
            <el-table-column label="排名" prop="date" type="index" width="60">
            </el-table-column>
            <el-table-column label="地区" prop="name">
            </el-table-column>
            <el-table-column label="扫码量" prop="address">
            </el-table-column>
            <el-table-column label="红包金额" prop="address" width="100">
            </el-table-column>
            <el-table-column label="占比" prop="address">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import * as echarts from 'echarts';

//各省份的数据
let allData = [
  {
    name: "北京",
  },
  {
    name: "天津",
  },
  {
    name: "上海",
  },
  {
    name: "重庆",
  },
  {
    name: "河北",
  },
  {
    name: "河南",
  },
  {
    name: "云南",
  },
  {
    name: "辽宁",
  },
  {
    name: "黑龙江",
  },
  {
    name: "湖南",
  },
  {
    name: "安徽",
  },
  {
    name: "山东",
  },
  {
    name: "新疆",
  },
  {
    name: "江苏",
  },
  {
    name: "浙江",
  },
  {
    name: "江西",
  },
  {
    name: "湖北",
  },
  {
    name: "广西",
  },
  {
    name: "甘肃",
  },
  {
    name: "山西",
  },
  {
    name: "内蒙古",
  },
  {
    name: "陕西",
  },
  {
    name: "吉林",
  },
  {
    name: "福建",
  },
  {
    name: "贵州",
  },
  {
    name: "广东",
  },
  {
    name: "青海",
  },
  {
    name: "西藏",
  },
  {
    name: "四川",
  },
  {
    name: "宁夏",
  },
  {
    name: "海南",
  },
  {
    name: "台湾",
  },
  {
    name: "香港",
  },
  {
    name: "澳门",
  },
];
for (let i = 0; i < allData.length; i++) {
  allData[i].value = 0;
}

export default {
  name: "wel",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.loadMap("china"); //初始化全国地图
  },
  methods: {
    loadMap(name) {
      import('@/util/map.json').then(data => {
        if (data) {
          echarts.registerMap(name, data);
          var myChart = echarts.init(this.$refs.map_chart);
          let option = {
            title: {
              text: '区域热度'
            },
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.data) return params.name + "：" + params.data["value"];
              },
            },
            visualMap: {
              type: "continuous",
              text: ["", ""],
              showLabel: true,
              left: "50",
              min: 0,
              max: 100,
              inRange: {
                color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"],
              },
              splitNumber: 0,
            },
            series: [
              {
                name: "MAP",
                type: "map",
                mapType: name,
                selectedMode: "false", //是否允许选中多个区域
                label: {
                  normal: {
                    show: true,
                  },
                  emphasis: {
                    show: true,
                  },
                },
                data: allData,
              },
            ],
          };
          myChart.setOption(option);
          // curMap = {
          //     mapCode: mapCode,
          //     mapName: name
          // };
        } else {
          alert("无法加载该地图")
        }
      })

    }
  }
};
</script>

<style lang="scss" scoped>
.el-font-size {
  font-size: 14px;
}

.container {
  background: #FFFFFF;
  min-height: calc(100vh - 100px);
  padding: 12px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.o-orange {
  color: orange;
}

.card_wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.card {
  width: 260px;
  font-weight: bold;
  margin: 0 3% 10px 0;
  flex-shrink: 0;

  &:last-child {
    margin-right: 0;
  }

  @media screen and (min-width: 950px) {
    width: 300px;
  }

  .label {
    color: #777777;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .num {
    font-size: 18px;

  }
}

.main_wrap {
  flex: 1;
}
.main {
  display: flex;

  .map_chart {
    flex: 1;
    height: calc(100vh - 300px);
  }

  .top10 {
    width: 400px;

    .search {
      display: flex;
      align-items: center;
    }
  }
}
</style>

